/**
* @Author: 858834013@qq.com
* @Name: item
* @Date: 2022-07-01
* @Desc:
*/
<template>
  <div class="itemBody">
    <img class="icon_top_left" src="./assets/icon_top_left.png" alt="">
    <img class="icon_top_right" src="./assets/icon_top_right.png" alt="">
    <img class="icon_bottom_left" src="./assets/icon_bottom_left.png" alt="">
    <img class="icon_bottom_right" src="./assets/icon_bottom_right.png" alt="">
    <div class="list">
      <div class="listItem" v-for="(item,index) in list" :key="index">
        <div class="iconMain">
          <i class="icon iconfont " :class="item.icon"></i>
        </div>
        <div class="listItemInfo">
          <p>{{ item.name }}</p>
          <gsapNum :number="item.value"></gsapNum>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {todayReport} from "@/api/api/waterSupplyOverview.js";
import gsapNum from "@/components/gsapNum/index.vue";

export default {
  components: {gsapNum},
  name: "item",
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      const response = await todayReport();
      this.list = response.data;
    },
  },
}
</script>

<style lang="scss" scoped>

.itemBody {
  width: 100%;
  height: 80px;
  position: relative;
  border-top: 1px solid #004062;
  border-bottom: 1px solid #004062;

  .list {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;

    .listItem {
      width: calc(50% - 10px);
      margin-left: 10px;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .iconMain {
        background: url("./assets/iconbgAnimate.png") no-repeat;
        width: 59px;
        height: 59px;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;

        .icon {
          font-size: 28px;
          background: -webkit-linear-gradient(#88e1ff, #26c8ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          color: transparent;
        }
      }

      .listItemInfo {
        margin-left: 20px;

        p {
          font-size: 13px;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          color: #FFFFFF;
        }

        span {
          font-size: 22px;
          font-family: UniDream;
          font-weight: normal;
          color: #FFFFFF;
        }
      }
    }
  }

  .icon_top_left {
    position: absolute;
    top: -1px;
    left: 0;
    width: 6px;
    height: 6px;
  }

  .icon_top_right {
    position: absolute;
    top: -1px;
    right: 0;
    width: 6px;
    height: 6px;
  }

  .icon_bottom_right {
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 6px;
    height: 6px;
  }

  .icon_bottom_left {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 6px;
    height: 6px;
  }
}
</style>
